<template>
  <view class="container">
    <view class="title"> 1RM排行榜 </view>
    <view class="changeTab" v-if="activeTab == 0">
      <view class="tab tab1" style="color: #fff" @click="changeTab(0)">
        深蹲
      </view>
      <view class="tab tab2" @click="changeTab(1)"> 卧推 </view>
      <view class="tab tab3" @click="changeTab(2)"> 硬拉 </view>
    </view>
    <view class="changeTab" v-else-if="activeTab == 1">
      <view class="tab tab4" @click="changeTab(0)"> 深蹲 </view>
      <view class="tab tab5" style="color: #fff" @click="changeTab(1)">
        卧推
      </view>
      <view class="tab tab3" @click="changeTab(2)"> 硬拉 </view>
    </view>
    <view class="changeTab" v-else>
      <view class="tab tab4" @click="changeTab(0)"> 深蹲 </view>
      <view class="tab tab2" @click="changeTab(1)"> 卧推 </view>
      <view class="tab tab6" style="color: #fff" @click="changeTab(2)">
        硬拉
      </view>
    </view>
    <view class="theCharts" v-if="theChartsList.length != 0">
      <view
        class="chartsItem"
        v-for="(item, index) in theChartsList"
        :key="item"
      >
        <view class="avat">
          <!-- <image src="../../static/job/type.png" mode=""></image> -->
          <image :src="item.avat" mode="widthFix"></image>
        </view>
        <view class="name">
          {{ item.nickName }}
        </view>
        <view class="recordData">
          {{ item.rankmode1RM }}
          <text class="kg">KG</text>
        </view>
        <view class="index">
          {{ index + 1 }}
        </view>
      </view>
    </view>
    <view
      style="
        text-align: center;
        font-family: '优设标题黑';
        margin-top: 200px;
        font-size: 24px;
      "
      v-else
    >
      暂无数据
    </view>
    <view class="myRanking">
      我的排名：第<view class="num">
        {{ myRank || 0 }} </view
      >名
    </view>
  </view>
</template>

<script>
import { jobList } from "../../apis/job.js";

export default {
  data() {
    return {
      activeTab: 0, //0-深蹲 1-卧推 2-硬拉
      myRank: 0, //我的排名
      theChartsList: [],
      // theChartsList: [{
      // 	avat: '../../static/job/type.png',
      // 	nickName: '昵称',
      // 	rankmode1RM: '100',
      // 	trainingVolume: '4*12*80'
      // }, {
      // 	avat: '../../static/job/type.png',
      // 	nickName: '昵称',
      // 	rankmode1RM: '100',
      // 	trainingVolume: '4*12*80'
      // }, {
      // 	avat: '../../static/job/type.png',
      // 	nickName: '昵称',
      // 	rankmode1RM: '100',
      // 	trainingVolume: '4*12*80'
      // }, {
      // 	avat: '../../static/job/type.png',
      // 	nickName: '昵称',
      // 	rankmode1RM: '100',
      // 	trainingVolume: '4*12*80'
      // }, {
      // 	avat: '../../static/job/type.png',
      // 	nickName: '昵称',
      // 	rankmode1RM: '100',
      // 	trainingVolume: '4*12*80'
      // }, {
      // 	avat: '../../static/job/type.png',
      // 	nickName: '昵称',
      // 	rankmode1RM: '100',
      // 	trainingVolume: '4*12*80'
      // }, ]
    };
  },
  onLoad(options) {
    console.log("获取到", options.value);
    if (options.value) {
      this.activeTab = options.value;
    }
  },
  onShow() {
    this.jobListApi();
  },
  methods: {
    changeTab(e) {
      this.activeTab = e;
      this.jobListApi();
    },
    jobListApi() {
      let paramsData = {
        type:
          this.activeTab == 0 ? "深蹲" : this.activeTab == 1 ? "卧推" : "硬拉",
      };
      jobList(paramsData).then((res) => {
        if (res.status == "success") {
          this.theChartsList = res.data.theChartsList;
          this.myRank = res.data.myRank;
        } else {
          console.log("job请求失败");
        }
      });
    },
  },
};
</script>
<style>
page {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

// 去掉页面滚动条
::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
</style>
<style lang="less" scoped>
page {
}

.container {
  height: 100%;
  width: 100%;
  font-family: PingFangSC-Semibold, PingFang SC;
  padding: 30rpx;
  box-sizing: border-box;
  // overflow: hidden !important;
  background: #f1f1f2;

  color: #333;
  padding-bottom: 50px;

  .title {
    width: fit-content;
    text-align: center;
    margin: 0 auto;
    font-size: 36px;
    letter-spacing: 10px;
    font-family: "优设标题黑";
    background: linear-gradient(to right, rgba(121, 72, 234, 1), #ee7172);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .changeTab {
    display: flex;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 25px;
    position: relative;
    font-family: "优设标题黑";

    .tab {
      flex: 1;
      font-size: 24px;
      padding: 0 18px;
      position: absolute;
      color: #6e58aa;
    }

    .tab1 {
      background: url(../../static/imgs/a1.png) no-repeat;
      background-size: contain;
      width: 45%;
      height: 39px;
    }

    .tab2 {
      background: url(../../static/imgs/s2.png) no-repeat;
      left: 22%;
      background-size: contain;
      width: 57%;
      text-align: center;
      height: 49px;
      padding-top: 5px;
    }

    .tab3 {
      background: url(../../static/imgs/s3.png) no-repeat;
      right: 0;
      background-size: contain;
      width: 42.5%;
      text-align: right;
      height: 49px;
      padding-top: 5px;
    }

    .tab4 {
      background: url(../../static/imgs/s1.png) no-repeat;
      background-size: contain;
      width: 42%;
      height: 39px;
    }

    .tab5 {
      background: url(../../static/imgs/a2.png) no-repeat;
      left: 21.5%;
      background-size: contain;
      width: 57%;
      text-align: center;
      height: 49px;
      padding-top: 5px;
    }

    .tab6 {
      background: url(../../static/imgs/a3.png) no-repeat;
      right: 0;
      background-size: contain;
      width: 42.5%;
      text-align: right;
      height: 49px;
      padding-top: 5px;
    }
  }

  .theCharts {
    margin-top: 10px;
    overflow: scroll;
    height: 80%;
    font-family: "优设标题黑";
    color: #6e58aa;

    .chartsItem {
      width: 100%;
      padding: 6px;
      background-color: #fff;
      display: flex;
      align-items: center;
      position: relative;
      margin-top: 15px;
      box-shadow: 0px 2px 4px rgba(110, 88, 170, 0.2);

      .avat {
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 50%;
        width: 21px;
        height: 21px;
        display: flex;
        align-items: center;
        justify-content: center;
        // padding: 1px;

        image {
          width: 21px;
          height: 21px;
          border-radius: 50%;
        }
      }

      .name {
        margin-left: 8px;
        font-family: "优设标题黑";
      }

      .recordData {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0%);
        font-size: 20px;
        font-family: "优设标题黑";

        .kg {
          font-size: 10px;
        }
      }

      .index {
        position: absolute;
        right: 10px;
        font-size: 24px;

        font-family: "优设标题黑";
      }
    }
  }

  .myRanking {
    display: flex;
    align-items: center;
    font-size: 24px;
    position: fixed;
    bottom: 0px;

    font-family: "优设标题黑";
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);

    color: #6e58aa;

    .num {
      font-size: 40px;
      color: #785aa6;
      background: linear-gradient(to bottom, #f1f1f1, #a613a6);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      padding-bottom: 5px;
    }
  }
}
</style>
